<template>
    <el-row class="row-bg header-top" justify="center" >
        <el-col :span="8">
            Hi,欢迎来到逃票
            <span v-if="!loginUser">
               [
                <router-link to="/login">登录</router-link>
                &nbsp;
                    <router-link to="/enroll" style="color:#000">注册</router-link>
                ]
                &nbsp;
            </span>
            <span v-if="loginUser" style="margin: 0 10px;cursor: pointer;" title="进入个人中心" @click="$router.push('/home')"> <img style="border-radius:50%;height:32px;width:32px;" :src="loginUser.loginUser.imgUrl" alt=""> {{loginUser.loginUser.realName}}</span>
            <el-dropdown style="margin-top:10px;"  v-if="loginUser">
                <span class="el-dropdown-link">
                    我的逃票
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="$router.push('/home')">个人信息</el-dropdown-item>
                        <el-dropdown-item @click="$router.push('/orderList')">订单管理</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </el-col>
        <el-col :span="6">
            <el-row :gutter="0">
            <el-col :span="4">
            <el-dropdown style="margin-top:10px ;">
                <span class="el-dropdown-link">
                    逃票网微信
                    <!-- <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon> -->
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <img src="./img/p_code.jpg" />
                        </el-dropdown-item>

                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            </el-col>
            <el-col :span="4">
            <el-dropdown style="margin-top:10px ;margin-left: 7px;">
                <span class="el-dropdown-link">
                    手机版
                    <!-- <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon> -->
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>
                            <img src="./img/p_code.jpg" />
                        </el-dropdown-item>

                    </el-dropdown-menu>
                </template>
            </el-dropdown></el-col>
            <el-col :span="5">
            <el-dropdown style="margin-top:9px ;">
                <span class="el-dropdown-link">
                    客户服务
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>帮助中心</el-dropdown-item>
                        <el-dropdown-item>在线客服</el-dropdown-item>
                        <el-dropdown-item>人工服务</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown></el-col>
            <!-- <el-col :span="5">
            <el-dropdown style="margin-top:11px ;">
                <span class="el-dropdown-link">
                    网站导航
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>帮助中心</el-dropdown-item>
                        <el-dropdown-item>在线客服</el-dropdown-item>
                        <el-dropdown-item>人工服务</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            </el-col> -->
            <el-col :span="4">网站导航</el-col>
            <el-col :span="4">English</el-col>
            </el-row>
        </el-col>
    </el-row>
</template>
<script setup>
import {useLoginStore} from "../../store/useLoginStore"
import { ArrowDown } from '@element-plus/icons-vue'

const loginUser = useLoginStore().loginUser;

</script>
<style scoped>
* {
    margin: 0px auto;
    font-size: 12px;
    color: #1B1B1B;
}

a {
    text-decoration: none;
    color: #1B1B1B;
}
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
a{
    text-decoration: none;
    color:chocolate;
}
.header-top{
    background-color: #F7F7F7;
    line-height: 35px;
    border-bottom: 1px solid #ccc;
    height: 35px;
}

</style>